
.add-index{
    height: 21rem;
    .slideshow{
        overflow: hidden;
        height: 5.381rem;
        background-color: #ccc;
        width: 100%;
        .swiper-wrapper{
            display: flex;
            width: 200%;
            height: 3.125rem;

                img{
                    width: 10rem;
                }
            
        }
    }
    .nav{
        display: flex;
        height: 15.625rem;
        width: 9.28rem;
        margin: 0 auto;
        flex-direction: column;
        justify-content: space-around;
        max-width: 10rem;
        .navR1{
            display: flex;
            justify-content: space-around;
            height: 3.6228rem;
            .R1L{
                flex: 2;
                background-color: #54afda;
                margin-right: 38.0544px;
                border-radius: .3438rem;

                .ranking{
                    height: 100%;
                    background: url(../imgs/index-card-rank.png)no-repeat -0.3598rem .5405rem;
                    background-size: 3.025rem;
                    display: flex;
                    flex-direction: column;
                    .ranking-top{
                        flex: 1;
                        color: #9C004E73;
                        font-size: .5125rem;
                        padding-left: .125rem;
                        padding-top: .1563rem;
                    }
                    .ranking-bottom{
                        flex: 3;
                        padding-right: .2031rem;
                        text-align: right;
                        line-height: 1.4;
                        margin-top: 0.8188rem;
                        font-size: 1.1406rem;
                        font-weight: 700;
                        color: #fff;
                    }
                }
            }
            .R1R{
                flex: 3;
                background-color: #9fd9f8;
                border-radius: .3438rem;
                .clockIn{
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    height: 100%;
                    background: url(../imgs/index-card-sum.png) no-repeat .2656rem .8594rem;
                    background-size: 2.6563rem;
                    .clockIn-top{
                        flex: 1;
                        color: #005177;
                        font-size: .5125rem;
                        padding-left: .125rem;
                        padding-top: .1563rem;
                    }
                    .clockIn-bottom{
                        flex: 3;
                        display: flex;
                        justify-content: end;
                        align-items: flex-end;
                    
                        #todayPunch{
                            display: inline-block;
                            border: 2px solid #005177;
                            height: .9375rem;
                            line-height: 0.8575rem;
                            margin-bottom: .3125rem;
                            margin-right: .8281rem;
                            width: 2.0313rem;
                            text-align: center;
                            font-weight: 700;
                            border-radius: .5156rem;
                            font-size: 0.3625rem;
                            color:                         #004e73
                            ;
                            background-color: transparent;
                        }
                    }

                }
            }
            



        }
        .navR2{
            display: flex;
            height: 2.6718rem;
            justify-content: space-around;
            .R2L{
                flex: 1;
                background: url(../imgs/index-card-data.png)no-repeat;
                background-size: cover;
                border-radius: .3281rem;
                margin-right: .4688rem;

                .data{
                    color: #fff;
                    font-weight: 700;
                    font-size: .3906rem;
                    margin-top: .2344rem;
                    margin-left: .4375rem;
                }
            }
            .R2R{
                flex: 1;
                background-color: #9dbde3;
                border-radius: 0.3438rem;
                .medal{
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    height: 100%;
                    background: url(../imgs/index-card-badge.png) no-repeat .1719rem .4375rem;
                    background-size: 2.1875rem;
                    .medal-top{
                        flex: 1;
                        color: #015278;
                        font-size: .5125rem;
                        font-size: .4219rem;
                        padding-left: .125rem;
                        padding-top: .1563rem;
                    }
                    .medal-bottom{
                        flex: 3;
                        display: flex;
                        justify-content: end;
                        align-items: flex-end;
                        color: #004e73;
                        margin-right: .3438rem;
                        margin-bottom: .4688rem;
                        align-items: baseline;
                        b{
                            font-size: 1.4063rem;
                        }
                    }

                }
            }
        }
        .navR3{
            height: 2.6718rem;
            background: url(../imgs/index-swiper-bg2.jpg)no-repeat 0 -0.4688rem;
            background-size: cover;
            border-radius: .375rem;
            .course{
                color: #fff;
                font-weight: 700;
                margin-top: .3125rem;
                font-size: .3906rem;
                margin-left: .5rem;
            }
        }
        .navR4{
            height: 2.6718rem;
            background: url(../imgs/course-img02.png)no-repeat 0 -0.4688rem;
            background-size: cover;
            border-radius: .375rem;
            .running{
                color: #fff;
                font-weight: 700;
                margin-top: .3125rem;
                font-size: .3906rem;
                margin-left: .5rem;
            }
        }
    }


}